<!-- 司机列表 -->
<template>
    <div class='page-main'>
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="手机号">
                <el-input v-model="formInline.mobile" placeholder="输入司机手机号"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="formInline.approve" placeholder="选择审核状态" @change="changeStatusSelect">
                    <el-option label="全部" :value="-1"></el-option>
                    <el-option label="未提交认证" :value="0"></el-option>
                    <el-option label="认证通过" :value="1"></el-option>
                    <el-option label="拒绝" :value="2"></el-option>
                    <el-option label="认证待审核" :value="4"></el-option>
                </el-select>
            </el-form-item>
        </CustomForm>

        <el-table :data="list" style="width: 100%" height="640" align="center" v-loading="tableLoading">
            <el-table-column prop="id" label="用户ID" align="center" width="80">
            </el-table-column>
            <!-- <el-table-column prop="id" label="身份" align="center" width="80">
            </el-table-column> -->
            <el-table-column prop="user_name" label="手机号" align="center">
            </el-table-column>
            <el-table-column prop="money" label="可提现余额" align="center">
            </el-table-column>
            <el-table-column prop="t_money" label="不可提现余额" align="center">
            </el-table-column>
            <el-table-column prop="oil_money" label="油卡余额" align="center">
            </el-table-column>
            <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.approve == 0" style="color: red;">未提交认证</span>
                    <span v-else-if="scope.row.approve == 1" style="color: green;">认证通过</span>
                    <span v-else-if="scope.row.approve == 2" style="color: red;">拒绝</span>
                    <span v-else-if="scope.row.approve == 4">认证待审核</span>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="delDrive(scope.row.id)"
                        v-if="scope.row.approve !== 1">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { driverUserList, deleteDriverUser } from '@/api/driver';
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            formInline: {
                mobile: "",
                approve: -1,
                page: 1,
                pageSize: 10,
            },
            list: [],
            total: 0,
            tableLoading: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        async driverUserList() {
            this.tableLoading = true;
            let res = await driverUserList(this.formInline);
            if (res.code == 200) {
                this.list = res.data ? res.data.list : [];
                this.total = res.data ? res.data.count : 0;
            }
            this.tableLoading = false;
        },
        onSubmit() {
            this.formInline.page = 1;
            this.driverUserList();
        },
        resetTable() {
            this.formInline = {
                mobile: "",
                approve: "",
                page: 1,
                pageSize: 10,
            };
            this.driverUserList();
        },
        handleSizeChange(pageSize) {
            this.formInline.page = 1;
            this.formInline.pageSize = pageSize;

            this.driverUserList();

        },
        handleCurrentChange(page) {
            this.formInline.page = page;
            this.driverUserList();
        },
        changeStatusSelect() {
            this.driverUserList();
        },
        delDrive(id) {
            this.$confirm('确定要删除该司机吗？', '删除司机', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await deleteDriverUser({
                    id
                });
                if (res.code == 200) {
                    this.$message.success(res.msg)
                } else {
                    this.$message.error(res.msg)
                }
                this.driverUserList();
            }).catch((e) => {
                console.log(e, "报错");
            });
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.driverUserList();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
::v-deep .el-table {
    margin-top: 40px;
}

::v-deep .el-pagination {
    margin-top: 30px;
}
</style>